<template>
    <div id="pressureDate" class="pressureDate">
		<div class="content_wrap">
		    <hj-table :apiURL="getData" :tableColumn="tableColumn" :searchList="searchList" :searchModel="searchModel" :searchOpeartors="searchOpeartors"></hj-table>
            <!-- <div id="mapContent">

            </div> -->
            </div>
	</div>
</template>

<script>
export default {
	name:'pressureDate',
	data(){
		return {
            map:null,
            tableMaxHeight:0,
            // nowDate:),
            tableColumn:[
                {
                    prop:'time',
                    label:'时间',
                    type:'text',
                    align:'center'
                    // format:(row)=>{
                    //     return row.time.split(' ')[0]
                    // }
                },
                {
                    prop:'coordinate',
                    label:'经纬度',
                    type:'text',
                    align:'center',
                    // width:'300',
                    format:(row)=>{
                        if(row.coordinate instanceof Array){
                           return row.coordinate.join('，');
                        }
                        
                    }
                },
                {
                    prop:'risk',
                    label:'漏损概率',
                    type:'text',
                    sortable:true,//排序列
                    // width:'100',
                    align:'center'
                },
                {
                    prop:'range',
                    label:'漏损范围（km）',
                    type:'text',
                    sortable:true,//排序列,
                    // width:'120',
                    align:'center'
                }
            ],
            searchList:[
                {
                    index:1,
                    name:'startDate',
                    label:'开始时间',
                    placeholder:'开始时间',
                    type:'date',
                    format:'yyyy-MM-dd'
                },
                {
                    index:2,
                    label:'截止时间',
                    name:'endDate',
                    placeholder:'截止时间',
                    type:'date',
                    format:'yyyy-MM-dd'
                }
            ],
            searchModel:{
                startDate:'',
                endDate:''
            },
            searchOpeartors:[
                {
                    text:'查询',
                    name:'search',
                    type:'primary'
                },
                {
                    text:'重置',
                    name:'reSet',
                    type:''
                }
            ],
            searchParams:null
		}
	},
	components:{
		hjTable:()=> import ('@/components/hjTable/HJTable.vue')
	},
    created(){
        this.total = this.tableData.length;
    },  
    mounted(){
        this.$nextTick(()=>{
            this.getTableMaxHeight();
        })
        window.addEventListener('resize',()=>{
            this.getTableMaxHeight();
        })
        // this.addMap();
    },
	methods:{
		getData(params){
            this.searchParams = params;
            return this.$axios.post('http://43.136.137.111:9898/jiangan/leakage/model/history',params);
        },  
        getTableMaxHeight(){
            this.tableMaxHeight = this.$refs.tableWrapper.offsetHeight - 20 ;
        },
        // addMap(){
        //     window._AMapSecurityConfig = {
		// 		securityJsCode:'f942bcd483b14957dd25aa7039f85570',
		// 	}
        //     this.$AMapLoader.load({
		// 		key: "7ba1c234cc901e5f5bd9f3e2f444abac",             // 申请好的Web端开发者Key，首次调用 load 时必填
		// 		// key:'e43e1003d8b128cad822ef01ae24e4d4',
		// 		version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		// 		plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
		// 		Loca:{
		// 			version:'2.0.0'
		// 		}
		// 	}).then((AMap) => {
		// 		this.map = new AMap.Map("mapContent", {  //设置地图容器id
		// 			viewMode: "3D",    //是否为3D地图模式
		// 			zoom: 15,           //初始化地图级别
		// 			center: [105.066476, 28.740807], //初始化地图中心点位置
		// 			mapStyle: 'amap://styles/9eb96389790fbf01cc795d7d86d1baf3',
		// 			// mapStyle: 'amap://styles/d3a59cf36af457e0da4b54722d475763',
		// 			zIndex:10,
		// 			pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
		// 		});
		// 		this.addMark();
		// 	})      
        // },
        // addMark(){
        //     debugger
        //     let params = Object.assign({startDate:'',endDate:'',pageSize:10,pageNum:1},this.searchParams);
        //     this.getData(params).then(res => {
        //         if(res.code == '200' && res.rows)
        //         res.rows.forEach(item => {
        //             debugger
        //             const coordinate = item.coordinate;
        //             let range = item.range * 100;
        //                 var circle = new AMap.Circle({
        //                     center: new AMap.LngLat(item.coordinate[0], item.coordinate[1]),//圆心位置
        //                     radius: range,  //半径
        //                     strokeColor: "#F33",  //线颜色
        //                     strokeOpacity: 1,  //线透明度
        //                     strokeWeight: 3,  //线粗细度
        //                     fillColor: "#ee2200",  //填充颜色
        //                 });
        //                 // that.map.add(circle);
        //                 let textMarker = new AMap.Text({
        //                     position:new AMap.LngLat(item.coordinate[0], item.coordinate[1]),
        //                     text:`漏损率：${item.risk}`,
        //                     anchor:'top-center',
        //                     offset:[0,-27]
        //                 })
        //                 this.map.add(textMarker);
        //                 this.map.add(circle);
        //         });
        //     })
        // }
	}
}
</script>

<style lang="less" scoped>
.pressureDate{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #02182d;
		box-sizing: border-box;
		.content_wrap{
			position: relative;
			width: 100%;
            height: 100%;
			box-sizing: border-box;
			padding: 135px 25px 30px 25px;
            // display: flex;
            // flex-direction: row;
            .hj-table{
                // width: 50%;
            }
            // #mapContent{
            //     width: 50%;
            //     height: 100%;
            //     margin-left: 10px;
            //     border: 1px solid #55668b;
            // }
		}
	}
	
</style>